<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="${webPath}/layui/css/layui.css">
    <jsp:include page="/WEB-INF/page/layout/cssjs.jsp" />

</head>

<body data-type="widgets">
	<script src="${webPath}/lib/amazeui/assets/js/theme.js"></script>
	<div class="am-g tpl-g">
        <!-- 头部 -->
       <jsp:include page="/WEB-INF/page/layout/head.jsp" />
        <!-- 侧边导航栏 -->
         <jsp:include page="/WEB-INF/page/layout/left.jsp" />
        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">
            <div class="row-content am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title  am-cf">用户列表</div>


                            </div>
                            <div class="widget-body  am-fr">

                                <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                                    <div class="am-form-group">
                                        <div class="am-btn-toolbar">
                                            <div class="am-btn-group am-btn-group-xs">
                                                <button type="button" class="am-btn am-btn-default am-btn-success" onclick="ajax_saveOrUpdate_page()"><span class="am-icon-plus"></span> 新增</button>
                                                <button type="button" class="am-btn am-btn-default am-btn-secondary"><span class="am-icon-save"></span> 保存</button>
                                                <button type="button" class="am-btn am-btn-default am-btn-warning"><span class="am-icon-archive"></span> 审核</button>
                                                <button type="button" class="am-btn am-btn-default am-btn-danger"><span class="am-icon-trash-o"></span> 删除</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                                    <div class="am-form-group tpl-table-list-select">
                                        <select data-am-selected="{btnSize: 'sm'}">
              <option value="option1">所有类别</option>
              <option value="option2">IT业界</option>
              <option value="option3">数码产品</option>
              <option value="option3">笔记本电脑</option>
              <option value="option3">平板电脑</option>
              <option value="option3">只能手机</option>
              <option value="option3">超极本</option>
            </select>
                                    </div>
                                </div>
                                <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
                                    <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                        <input type="text" class="am-form-field ">
                                        <span class="am-input-group-btn">
            <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" type="button"></button>
          </span>
                                    </div>
                                </div>

                                <div class="am-u-sm-12">
                                    <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black " id="example-r">
                                        <thead>
                                            <tr>
                                                <th>编号</th>
                                                <th>账号</th>
                                                <th>密码</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tbody">
                                            <tr class="even gradeC">
                                                <td >我建议WEB版本文件引入问题</td>
                                                <td>罢了</td>
                                                <td>2016-09-26</td>
                                                <td>
                                                    <div class="tpl-table-black-operation">
                                                        <a href="javascript:;" >
                                                            <i class="am-icon-pencil"></i> 编辑
                                                        </a>
                                                        <a href="javascript:;" class="tpl-table-black-operation-del" onclick="delete_user(item.id)">
                                                            <i class="am-icon-trash"></i> 删除
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                            
                                            <!-- more data -->
                                        </tbody>
                                    </table>
                                </div>
                                <div class="am-u-lg-12 am-cf">

                                    <div class="am-fr">
                                        <ul class="am-pagination tpl-pagination">
                                            <li class="am-disabled"><a href="#">«</a></li>
                                            <li class="am-active"><a href="#">1</a></li>
                                            <li><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">4</a></li>
                                            <li><a href="#">5</a></li>
                                            <li><a href="#">»</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
        <!-- 侧边导航栏 -->
         <jsp:include page="/WEB-INF/page/layout/foot.jsp" />
<iframe name="">

</iframe>


  <script type="text/javascript">
  window.onload= list_init();
  function list_init() {
	  $.ajax({
			url:"${webPath}/userController/ajaxList.hp",
			data:{},
			type:'post',
			dataType:'json',
			success:function(json){
				console.log(json);
				$('#tbody').html('');
				var html="";
				$.each(json.list,function(index,item){
					var tr=' <tr id="'+item.id+'" class="even gradeC">'+
					'<td>'+item.id+'</td>'+
					'<td>'+item.username+'</td>'+
					'<td>'+item.password+'</td>'+
					'<td>'+
					'    <div class="tpl-table-black-operation"  data="'+item.id+'">'+
					'        <a method="ajax_queryById" href="javascript:;" onclick="ajax_saveOrUpdate_page('+item.id+')">'+
					'            <i class="am-icon-pencil"></i> 编辑'+
					'        </a>'+
					'        <a method="ajax_delete"  href="javascript:;" class="tpl-table-black-operation-del"  onclick="delete_user('+item.id+')">'+
					'            <i class="am-icon-trash"></i> 删除'+
					'        </a>'+
					'    </div>'+
					'</td>'+
					'</tr>';
					
					html+=tr;
				})
				$('#tbody').append(html);
					
			},
			error:function(){
				alert('服务器有误,请联系管理员!!!')
			}
		});
};
</script>
<script type="text/javascript">
//删除
function delete_user(user_id) {
	$.ajax({
		url:"${webPath}/userController/ajax_delete.hp",
		data:{"id":user_id},
		type:'post',
		success:function(json){
			list_init();
		},
		error:function(){
			alert('delete有误,请联系管理员!!!')
		}
	});
};
//更新or保存操作 update_user
function ajax_saveOrUpdate() {
	
	var id = $("#souid").val();
 	if(id == undefined){
		id=null;
	} 
	var username = $("#souname").val();
	var password = $("#soupwd").val();
	$.ajax({
		url:"${webPath}/userController/ajax_saveOrUpdate.hp",
		data:{"id":id,
			  "username":username,
			  "password":password
			 },
		type:'post',
		success:function(json){
			list_init();
		},
		error:function(){
			alert('update有误,请联系管理员!!!')
		}
	});
};
//更新page 
function ajax_saveOrUpdate_page(user_id) {
	var username = $("#"+user_id).children().eq(1).text();
	console.log (user_id);
	var password = $("#"+user_id).children().eq(2).text();
	
    layer.open({
  	  type: 1 //Page层类型
  	  ,area: ['800px', '300px']
  	  ,title: '用户操作'
  	  ,shade: 0.6 //遮罩透明度
  	  ,maxmin: true //允许全屏最小化
  	  ,anim: 1 //0-6的动画形式，-1不开启
  	  ,content:'<div class="site-text site-block">'+
	    	  '  <form class="layui-form" id="user_from" >'+
	    	  '    <input id="souid" value="'+user_id+'"  type="hidden">'+
	    	  '    <div class="layui-form-item">'+
	    	  '      <label class="layui-form-label">账号</label>'+
	    	  '      <div class="layui-input-block">'+
	    	  '        <input id="souname" value="'+username+'" style="width: 650px" type="text" name="username" required="" lay-verify="required"  placeholder="请输入标题"  class="layui-input">'+
	    	  '      </div>'+
	    	  '    </div>'+
	    	  '    <div class="layui-form-item">'+
	    	  '      <label class="layui-form-label">密码</label>'+
	    	  '      <div class="layui-input-block">'+
	    	  '        <input id="soupwd" value="'+password+'" style="width: 650px" type="text" name="password" required="" lay-verify="required"  placeholder="密码"  class="layui-input">'+
	    	  '      </div>'+
	    	  '    </div>'+
	    	  '    <div class="layui-form-item">'+
	    	  '      <div class="layui-input-block">'+
	    	  '        <button onclick="ajax_saveOrUpdate()" class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button>'+
	    	  '        <button type="reset" class="layui-btn layui-btn-primary">重置</button>'+
	    	  '      </div>'+
	    	  '    </div>'+
	    	  '  </form>'+
	    	  '</div>'
    });
};
</script>


</body>

</html>